<template>
	<view>
		<view class="main-bg-color text-center text-white">
			<image src="../../static/images/logo_small.png" mode="aspectFill" class="logoImage mt-4 mb-2"></image>
			<view class="font-lg pb-4">欢迎登录</view>
		</view>
		<view class="p-5">
			<view  class="d-flex  mb-4 border-bottom a-center" :class="focusClass.name ? 'input-border-color' : ''">
				<view class="iconfont icon-yonghuming text-light-muted mr-1" :class="focusClass.name ? 'main-text-color' : ''"></view>
				<input type="text" placeholder="请输入用户名" placeholder-class="text-light-muted" 
				class="font-md input-width my-2" v-model="modelInput.name"
				@focus="focus('name')" @blur="blur('name')"/>
			</view>
			<view class="d-flex mb-4 border-bottom a-center j-sb" :class="focusClass.password ? 'input-border-color' : ''">
				<view class="d-flex a-center">
					<view class="iconfont icon-mima text-light-muted mr-1" :class="focusClass.password ? 'main-text-color' : ''"></view>
					<input :password="isPassword" type="text"  placeholder="请输入密码(6-12位)" placeholder-class="text-light-muted" 
					class="font-md input-width my-2"  v-model="modelInput.password"
					@focus="focus('password')" @blur="blur('password')"/>
				</view>
				<view class="iconfont text-light-muted mr-1" :class="isPassword?'icon-yincangmima':'icon-Group-'" @tap="isPassword=!isPassword"></view>
			</view>
			<view class="py-2 w-100 d-flex a-center j-center main-bg-color text-white rounded font-md" hover-class="main-bg-hover-color" @click="submit">
				登录
			</view>
		</view>
	</view>
</template>

<script>
	import api from '@/common/api/api.js'
	import {mapMutations} from 'vuex';
	let timmer;
	export default {
		data() {
			return {
				isPassword:true,
				modelInput:{
					name:"",
					password:''
				},
				focusClass:{
					name:false,
					password:false
				},
				// 验证规则
				rules:{
					name:[
						{
							rule:/^.{2,20}$/,
							msg:"用户名必须是2-20个字符"
						}
					],
					password:[
						{
							rule:/^.{6,12}$/,
							msg:"密码长度必须为6-12个字符"
						}
					]
				}
			}
		},
		onLoad(){
		},
		methods: {
			...mapMutations(['login']),
			focus(key){
				this.focusClass[key] = true
			},
			blur(key){
				this.focusClass[key] = false
			},
			// 表单验证
			validate(key){
				var check = true
				this.rules[key].forEach((v)=>{
					// 验证失败
					if (!(v.rule).test(this.modelInput[key])) {
						uni.showToast({ title: v.msg, icon: 'none' });
						check = false
						return false
					}
				})
				return check
			},
			submit(){
				let self=this;
				// 验证用户名
				if (!self.validate('name')) return;
				// 验证密码
				if (!self.validate('password')) return;
				let postData={...self.modelInput}
				self.$H.post(api.login,postData).then(res=>{
					self.login(res.content);
					uni.showToast({
						title: '登录成功',
						icon: 'none'
					});
					uni.redirectTo({
						url:'/pages/index/index'
					})
				})
			}
		}
	}
</script>

<style>
.logoImage{
	width:200upx;
	height:200upx;
}
</style>